<!-- moment -->
<template>
  <div style="width: 100%; height: 100%">
    <!-- <div style="width: 100; height: 100">
      <video src=""></video>
    </div> -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>精彩时刻已录制完成,是否下载</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dowmloadVideo">确 定</el-button>
      </span>
    </el-dialog>
    <Gallery
      class="gallery"
      :slide-wait-time="2000"
      :animation-solution="'byCanvas'"
      :animateItemDirection="'random'"
      :animate-speed-delay="10"
      :gridMaxWidth="300"
      :gridMaxHeight="300"
      :gridDividerWidth="0"
      :animateRowDirection="'random'"
      :animateColumnDirection="'random'"
      :animateEffect="'sameRandom'"
      :imageList="imageList"
      :animate-end-callback="animateEndCallback"
      :init-load-finish-callback="initLoadFinishCallback"
    ></Gallery>
    <audio :src="mus" class="media-audio" loop autoplay ref="MusicPlay"></audio>
  </div>
</template>
<script>
import Gallery from "../components/Gallery.vue";

export default {
  components: {
    Gallery,
  },
  data() {
    return {
      mus: require("../assets/你给我听好 - 陈奕迅.mp3"), //使用的音频
      imageList: [],
      dialogVisible: false,
      // imageList: [
      //   "http://172.23.4.55:9001/photo/1411561635523399682/1411574088341712897.jpg",
      //   "http://172.23.4.55:9001/photo/1411561635523399682/1411574088505290754.jpg",
      //   "http://172.23.4.55:9001/photo/1411561635523399682/1411574088731783171.jpg",
      //   "http://172.23.4.55:9001/photo/1411561635523399682/1411574084436815874.jpg",
      //   "http://172.23.4.55:9001/photo/1411561635523399682/1411574084898189314.jpg",
      //   "http://172.23.4.55:9001/photo/1411561635523399682/1411574085430865922.jpg",
      // ],
      times: 0,
      recorder: null,
      downloadUrl: "",
    };
  },
  beforeMount() {
    this.imageList = this.$route.query.urls;
  },
  methods: {
    /**
     * 暂停音乐并停止旋转
     */
    musicPause() {
      this.$refs.MusicPlay.pause();
      this.musicTF = true;
    },

    /**
     * 播放音乐并开始旋转
     */
    musicPlay() {
      this.$refs.MusicPlay.play();
      this.musicTF = false;
    },
    animateEndCallback() {
      this.times = this.times + 1;
      if (this.times === this.imageList.length) {
        this.recorder.stop();
        console.log("录制结束");
        // console.log(this.recorder);
      }
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          _;
          done();
        })
        .catch((_) => {
          _;
        });
    },
    dowmloadVideo() {
      let aTag = document.createElement("a");
      aTag.setAttribute("href", this.downloadUrl);
      console.log(this.downloadUrl);
      aTag.setAttribute("style.display", "none");
      aTag.setAttribute("download", "moment.webm");
      aTag.click();
      // 释放创建的文件地址对象
      window.URL.revokeObjectURL(this.downloadUrl);
      this.dialogVisible = false;
    },
    initLoadFinishCallback() {
      var canvas = document.querySelector("canvas");
      const stream = canvas.captureStream();
      this.recorder = new MediaRecorder(stream, { mimeType: "video/webm" });
      const data = [];
      this.recorder.ondataavailable = function (e) {
        // if (event.data && event.data.size) {
        //   data.push(event.data);
        // }
        data.push(e.data);
        console.log(data);
      };
      let that = this;
      this.recorder.onstop = () => {
        const url = URL.createObjectURL(new Blob(data, { type: "video/webm" }));
        console.log(url);
        that.downloadUrl = url;
        that.dialogVisible = true;
      };
      this.recorder.start();
      console.log("录制开始");
    },
  },
};
</script>

<style   scoped>
.gallery {
  width: 100%;
  height: 100%;
  padding: 0 0 0 0;
}
</style>
